<template>
  <div class="precondition-test">
    <n-card title="前置条件编辑器测试" :bordered="false" size="small" class="h-full shadow-sm rounded-8px">
      <n-space vertical size="large">
        <!-- 编辑器 -->
        <n-card title="可视化编辑器" size="small">
          <PreconditionEditor v-model="config" />
        </n-card>

        <!-- 当前配置 -->
        <n-card title="当前配置JSON" size="small">
          <n-code
            :code="configJson"
            language="json"
            show-line-numbers
            word-wrap
          />
        </n-card>

        <!-- 测试按钮 -->
        <n-space>
          <n-button type="primary" @click="loadSampleConfig">
            加载示例配置
          </n-button>
          <n-button @click="clearConfig">
            清空配置
          </n-button>
          <n-button type="info" @click="loadComplexConfig">
            加载复杂配置
          </n-button>
          <n-button type="warning" @click="loadSortTestConfig">
            加载排序测试配置
          </n-button>
          <n-button type="success" @click="loadCheckboxTestConfig">
            测试多选框功能
          </n-button>
        </n-space>

        <!-- 配置变化监听 -->
        <n-card title="配置变化日志" size="small" v-if="changeLog.length > 0">
          <n-scrollbar style="max-height: 200px;">
            <div v-for="(log, index) in changeLog" :key="index" class="mb-8px">
              <n-tag size="small" type="info">{{ log.time }}</n-tag>
              <span class="ml-8px">{{ log.message }}</span>
            </div>
          </n-scrollbar>
          <template #footer>
            <n-button size="small" @click="clearLog">清空日志</n-button>
          </template>
        </n-card>
      </n-space>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import PreconditionEditor from '@/components/PreconditionEditor.vue'

// 配置数据
const config = ref(null)

// 变化日志
const changeLog = ref([])

// 配置JSON字符串
const configJson = computed(() => {
  return config.value ? JSON.stringify(config.value, null, 2) : '{}'
})

// 监听配置变化
watch(config, (newValue, oldValue) => {
  if (oldValue !== null) { // 忽略初始化
    const time = new Date().toLocaleTimeString()
    const fieldCount = newValue?.fields?.length || 0
    changeLog.value.unshift({
      time,
      message: `配置已更新，当前字段数量: ${fieldCount}`
    })
    // 保持日志数量在合理范围内
    if (changeLog.value.length > 20) {
      changeLog.value = changeLog.value.slice(0, 20)
    }
  }
}, { deep: true })

// 加载示例配置
const loadSampleConfig = () => {
  config.value = {
    fields: [
      {
        name: 'baby_gender',
        label: '宝宝性别',
        type: 'radio',
        options: ['男', '女'],
        required: true
      },
      {
        name: 'baby_birth_date',
        label: '宝宝出生日期',
        type: 'date',
        required: true
      },
      {
        name: 'baby_weight',
        label: '宝宝体重(kg)',
        type: 'number',
        min: 0,
        max: 50,
        required: false
      },
      {
        name: 'parent_name',
        label: '家长姓名',
        type: 'text',
        required: true
      }
    ]
  }
}

// 清空配置
const clearConfig = () => {
  config.value = null
}

// 加载复杂配置
const loadComplexConfig = () => {
  config.value = {
    fields: [
      {
        name: 'user_type',
        label: '用户类型',
        type: 'radio',
        options: ['个人用户', '企业用户', '学生用户'],
        required: true
      },
      {
        name: 'birth_date',
        label: '出生日期',
        type: 'date',
        required: true
      },
      {
        name: 'income',
        label: '月收入(元)',
        type: 'number',
        min: 0,
        max: 1000000,
        required: false
      },
      {
        name: 'education',
        label: '教育背景',
        type: 'radio',
        options: ['高中及以下', '大专', '本科', '硕士', '博士'],
        required: false
      },
      {
        name: 'company_name',
        label: '公司名称',
        type: 'text',
        required: false
      }
    ]
  }
}

// 加载排序测试配置
const loadSortTestConfig = () => {
  config.value = {
    fields: [
      {
        name: 'field_a',
        label: '字段A（拖拽我到其他位置）',
        type: 'text',
        required: true
      },
      {
        name: 'field_b',
        label: '字段B（使用上下移动按钮）',
        type: 'radio',
        options: ['选项1', '选项2'],
        required: false
      },
      {
        name: 'field_c',
        label: '字段C（测试排序功能）',
        type: 'number',
        min: 1,
        max: 100,
        required: true
      },
      {
        name: 'field_d',
        label: '字段D（最后一个字段）',
        type: 'date',
        required: false
      }
    ]
  }
}

// 加载多选框测试配置
const loadCheckboxTestConfig = () => {
  config.value = {
    fields: [
      {
        name: 'baby_gender',
        label: '宝宝性别',
        type: 'radio',
        options: ['男', '女'],
        required: true
      },
      {
        name: 'baby_interests',
        label: '宝宝兴趣爱好（多选）',
        type: 'checkbox',
        options: ['音乐', '绘画', '运动', '阅读', '手工', '舞蹈'],
        required: false
      },
      {
        name: 'learning_goals',
        label: '学习目标（多选）',
        type: 'checkbox',
        options: ['语言发展', '认知能力', '社交技能', '运动协调', '创造力'],
        required: true
      },
      {
        name: 'baby_name',
        label: '宝宝姓名',
        type: 'text',
        required: true
      },
      {
        name: 'baby_birth_date',
        label: '宝宝出生日期',
        type: 'date',
        required: true
      }
    ]
  }
}

// 清空日志
const clearLog = () => {
  changeLog.value = []
}
</script>

<style scoped>
.precondition-test {
  padding: 20px;
}
</style>
